<template>
  <div class="search">
    <Modal v-model="show" title="选择链接" :width="70">
      <Tabs :value="tabName" @on-click="handleTab">
        <TabPane
          v-for="(tab, index) in tabList"
          :key="index"
          :label="tab.label"
          :name="tab.value"
        >
          <Row @keydown.enter.native="handleSearch">
            <Form
              ref="searchForm"
              :model="searchForm"
              inline
              :label-width="60"
              class="search-form"
              @submit.native.prevent
            >
              <Form-item label="关键字" prop="keyword">
                <Input
                  type="text"
                  v-model="searchForm.keyword"
                  placeholder="请输入关键字"
                  clearable
                  style="width: 200px"
                />
              </Form-item>
              <Button
                @click="handleSearch"
                class="search-btn"
                type="primary"
                icon="ios-search"
                >搜索</Button
              >
            </Form>
          </Row>
          <Table
            :loading="loading"
            border
            :columns="columns"
            sortable="custom"
            class="mt_10"
            :data="data"
            ref="table"
          ></Table>
          <Row type="flex" justify="end" class="mt_10">
            <Page
              :current="searchForm.page"
              :total="total"
              :page-size="searchForm.rows"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
      </Tabs>
      <div slot="footer">
        <Button type="text" @click="show = false">取消</Button>
        <Button type="primary" @click="submitForm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Train from "@/api/trainbase.js";
import * as API_News from "@/api/news.js";
import * as API_Yard from "@/api/yard.js";
import * as API_Approval from "@/api/special.js";
import * as API_Community from "@/api/community.js";
export default {
  props: {
    value: { type: Boolean, default: false },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("on-close", false);
      },
    },
  },
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        keyword: "", //关键字
        page: 1,
        rows: 10,
      },
      tabList: [
        { value: "courseDetail", label: "课程" },
        { value: "healthExpert", label: "专家" },
        { value: "siteDetail", label: "场地" },
        { value: "baseDetail", label: "实践实训基地" },
        { value: "newsDateil", label: "资讯" },
        { value: "active-detail", label: "社区" },
      ],
      typeList: [
        // 资讯类型
        { value: "1003001", label: "政策法规" },
        { value: "1003002", label: "求职创业" },
        { value: "1003003", label: "运动处方" },
        { value: "1003004", label: "健康科普" },
        { value: "1003005", label: "其他" },
      ],
      baseTypeList: [], //基地类型
      tabName: "courseDetail", //标签页
      columns: [], //表格字段
      data: [], // 数据列表
      total: 0, // 表单数据总数
      checkId: null, // 选中数据ID
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.checkId = null;
        this.tabName = "courseDetail";
        this.getBaseType();
        this.handleTab(this.tabName);
      }
    },
  },
  methods: {
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.handleTab(this.tabName);
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.handleTab(this.tabName);
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.searchForm.rows = 10;
      this.handleTab(this.tabName);
    },
    // 切换标签页
    handleTab(val) {
      if (val != this.tabName) this.searchForm.keyword = "";
      this.tabName = val;
      this.data = [];
      this.total = 0;
      switch (val) {
        case "courseDetail":
          this.getCourseList();
          this.getCourseColumns();
          break;
        case "healthExpert":
          this.getExpertList();
          this.getExpertColumns();
          break;
        case "siteDetail":
          this.getYardList();
          this.getYardColumns();
          break;
        case "baseDetail":
          this.getBaseList();
          this.getBaseColumns();
          break;
        case "newsDateil":
          this.getNewsList();
          this.getNewsColumns();
          break;
        case "active-detail":
          this.getCommunityList();
          this.getCommunityColumns();
          break;
      }
    },
    // 选择
    handleCheck(row) {
      console.log(row);
      this.checkId = row.id == this.checkId ? null : row.id;
    },
    submitForm() {
      if (this.checkId) {
        let res = "";
        if (this.tabName == "baseDetail") {
          this.data.forEach((i) => {
            if (i.id == this.checkId) {
              res = `/${this.tabName}?tab=${encodeURIComponent("概览")}&disabled=${
                i.remain == 0
              }&id=${this.checkId}`;
            }
          });
        } else if (this.tabName == "courseDetail") {
          res = `/${this.tabName}?courseSeriesId=${this.checkId}`;
        } else {
          res = `/${this.tabName}?id=${this.checkId}`;
        }
        this.$emit("on-save", res);
      } else {
        this.$emit("on-close", false);
      }
    },
    // 设置课程表格列
    getCourseColumns() {
      this.columns = [
        { title: "序号", width: 100, type: "index" },
        {
          title: "课程",
          minWidth: 300,
          render: (h, params) => {
            let label = "--";
            if (params.row.courseType == 0) label = "视频课题";
            if (params.row.courseType == 1) label = "音频课题";
            if (params.row.courseType == 2) label = "图文课题";
            return h("div", { style: { display: "flex" } }, [
              h("img", {
                attrs: { src: params.row.coverPath },
                style: { width: "100px", marginRight: "10px" },
              }),
              h("div", { style: { margin: "auto 0 auto 0" } }, [
                h("span", {}, label),
                h("span", { style: { margin: "0 10px" } }, "|"),
                h("span", {}, params.row.seriesName),
                h("span", { style: { display: "block" } }, params.row.courseCode),
              ]),
            ]);
          },
        },
        { title: "上传人", key: "expertName", tooltip: true },
        { title: "上传时间", key: "createTime", tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let color = null;
            let label = "选择";
            if (this.checkId == params.row.id) {
              color = "error";
              label = "已选";
            }
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, color, label, "handleCheck", params),
            ]);
          },
        },
      ];
    },
    // 设置专家表格列
    getExpertColumns() {
      this.columns = [
        { title: "序号", width: 100, type: "index" },
        { title: "姓名", key: "realName", tooltip: true },
        { title: "手机号", key: "mobile", tooltip: true },
        { title: "身份证号", key: "idCard", tooltip: true },
        { title: "擅长领域", key: "domain", tooltip: true },
        { title: "个人简介", key: "introduction", tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let color = null;
            let label = "选择";
            if (this.checkId == params.row.id) {
              color = "error";
              label = "已选";
            }
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, color, label, "handleCheck", params),
            ]);
          },
        },
      ];
    },
    // 设置场地表格列
    getYardColumns() {
      this.columns = [
        { title: "序号", width: 80, type: "index" },
        { title: "场地名称", key: "siteName" },
        {
          title: "场地封面",
          tooltip: true,
          width: 240,
          align: "center",
          render: (h, params) => {
            return h("img", {
              attrs: { src: params.row.siteCover },
              style: { width: "150px", height: "100px" },
            });
          },
        },
        { title: "场地地址", key: "siteAddress", tooltip: true },
        { title: "创建时间", key: "createTime", tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let color = null;
            let label = "选择";
            if (this.checkId == params.row.id) {
              color = "error";
              label = "已选";
            }
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, color, label, "handleCheck", params),
            ]);
          },
        },
      ];
    },
    // 设置基地表格列
    getBaseColumns() {
      this.columns = [
        { title: "序号", width: 100, type: "index" },
        {
          title: "实践实训基地名称",
          width: 300,
          tooltip: true,
          render: (h, params) => {
            let func = [];
            if (params.row.trainingBaseCover) {
              func.push(
                h("img", {
                  attrs: { src: params.row.trainingBaseCover },
                  style: { width: "100px" },
                })
              );
            }
            if (params.row.name) {
              func.push(h("span", { style: { margin: "auto 10px" } }, params.row.name));
            }
            return h("div", { style: { display: "flex" } }, func);
          },
        },
        {
          title: "实践实训基地类型",
          tooltip: true,
          render: (h, params) => {
            let label = "";
            this.baseTypeList.forEach((i) => {
              if (i.id == params.row.type) label = i.name;
            });
            return h("span", {}, label);
          },
        },
        {
          title: "容纳人数",
          key: "capacity",
          width: 100,
          tooltip: true,
          render: (h, params) => {
            return h("span", {}, params.row.capacity + "人");
          },
        },
        { title: "基地位置", key: "siteAddress" },
        {
          title: "收费标准",
          width: 100,
          tooltip: true,
          render: (h, params) => {
            let label = "免费";
            if (params.row.isCharge == 1) label = params.row.unitPrice + "元/小时";
            return h("span", {}, label);
          },
        },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let color = null;
            let label = "选择";
            if (this.checkId == params.row.id) {
              color = "error";
              label = "已选";
            }
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, color, label, "handleCheck", params),
            ]);
          },
        },
      ];
    },
    // 设置资讯表格列
    getNewsColumns() {
      this.columns = [
        { title: "序号", width: 100, type: "index" },
        { title: "资讯标题", key: "title", tooltip: true },
        {
          title: "资讯类型",
          width: 100,
          tooltip: true,
          render: (h, params) => {
            let label = "";
            this.typeList.forEach((i) => {
              if (i.value == params.row.type) {
                label = i.label;
              }
            });
            return h("div", [h("span", {}, label)]);
          },
        },
        {
          title: "信息来源",
          width: 200,
          tooltip: true,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {},
                "【" +
                  (params.row.sourceType == 0
                    ? "内部供稿"
                    : params.row.sourceType == 1
                    ? "外部网站"
                    : "供稿") +
                  "】 " +
                  params.row.origin
              ),
            ]);
          },
        },
        { title: "发布时间", width: 200, key: "releaseTime", tooltip: true },
        {
          title: "操作",
          width: 150,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let color = null;
            let label = "选择";
            if (this.checkId == params.row.id) {
              color = "error";
              label = "已选";
            }
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, color, label, "handleCheck", params),
            ]);
          },
        },
      ];
    },
    // 设置社区表格列
    getCommunityColumns() {
      this.columns = [
        // 表头
        { title: "序号", width: 100, type: "index" },
        { title: "活动名称", key: "title", minWidth: 160, tooltip: true },
        {
          title: "报名时间",
          minWidth: 300,
          tooltip: true,
          render: (h, params) => {
            let stime = this.format(params.row.ready_stime);
            let etime = this.format(params.row.ready_time);
            return h("span", {}, stime + " ~ " + etime);
          },
        },
        {
          title: "活动时间",
          minWidth: 300,
          tooltip: true,
          render: (h, params) => {
            let stime = this.format(params.row.act_stime);
            let etime = this.format(params.row.act_time);
            return h("span", {}, stime + " ~ " + etime);
          },
        },
        { title: "已报名人数", key: "bunm", minWidth: 120, tooltip: true },
        {
          title: "状态",
          minWidth: 120,
          tooltip: true,
          render: (h, params) => {
            return h("span", {}, this.formatStatus(params.row));
          },
        },
        { title: "发布人", key: "pusher", minWidth: 120, tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            let color = null;
            let label = "选择";
            if (this.checkId == params.row.id) {
              color = "error";
              label = "已选";
            }
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, color, label, "handleCheck", params),
            ]);
          },
        },
      ];
    },
    // 获取课程列表
    getCourseList() {
      this.loading = true;
      let params = Object.assign(
        { expertName: this.searchForm.keyword },
        this.searchForm
      );
      API_Approval.postCoursePage(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.rows;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取专家列表
    getExpertList() {
      this.loading = true;
      API_Approval.postExpertPage(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取场地列表
    getYardList() {
      this.loading = true;
      let params = Object.assign({ status: 0 }, this.searchForm);
      API_Yard.postYardPage(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.rows;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //获取基地列表
    getBaseList() {
      this.loading = true;
      let params = Object.assign({ name: this.searchForm.keyword }, this.searchForm);
      API_Train.postTrainBasePage(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取资讯列表
    getNewsList() {
      this.loading = true;
      let params = Object.assign({ status: 4 }, this.searchForm);
      API_News.postNewsPage(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.rows;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取社区列表
    getCommunityList() {
      const { keyword, page, rows } = this.searchForm;
      let params = {
        keywords: keyword,
        pagesize: rows,
        page,
      };
      this.loading = true;
      API_Community.activityList(params)
        .then((res) => {
          if (res.code == 200) {
            this.data = res.data;
            this.total = parseInt(res.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取实训基地类型
    getBaseType() {
      API_Train.getTrainBaseType().then((res) => {
        if (res.success) {
          this.baseTypeList = res.result;
        }
      });
    },
    // 时间戳转换
    format(v) {
      let date = "";
      if (v) date = new Date(v * 1000).Format("yyyy-MM-dd hh:mm:ss");
      return date;
    },
    // 报名状态
    formatStatus(v) {
      let nowTime = new Date().getTime() / 1000;
      let label = "";
      if (nowTime < v.ready_stime) label = "报名未开始";
      if (nowTime > v.ready_stime && nowTime < v.ready_time) label = "报名进行中";
      if (nowTime > v.ready_time) label = "报名结束";
      return label;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
